import { useDispatch, useSelector } from "react-redux";
import { SFCtoMD } from "../../utils/index.JSX";
import { Button, Dialog, Space } from "antd-mobile";
import AddDialog from "./addDialog";
import { useMemo, useState } from "react";
import { delPerson, switchPersonState } from "../../store/persons/indexSlice";

// 人员管理组件
const PersonManage = () => {
  // 获取仓库数据
  const personList = useSelector((state) => state.person.personList);
  const personListStateTrue = useMemo(() => {
    return personList.filter(v => v.state)
  }, [personList])
  // 控制添加人员对话框的显示与隐藏
  const [showAddDialog, setShowAddDialog] = useState(false);

  // 获取dispatch方法
  const dispatch = useDispatch();



  return (
    <div>
      <div
        className="person-header"
        style={{ display: "flex", justifyContent: "space-between" }}
      >
        <h2>人员管理</h2>
        <Button size="mini" onClick={() => setShowAddDialog(true)}>
          添加人员
        </Button>
      </div>
      <div>
        <Space>
          {personList.map((v, i) => {
            return (
              <Button
                key={i}
                size="mini"
                color={v.state ? "primary" : "default"}
                onClick={() => dispatch(switchPersonState(v))}
              >
                {v.name}
              </Button>
            );
          })}
        </Space>
        {/* 状态为true 渲染 */}
        {personListStateTrue.map((v, i) => {
          return (
            <div
              key={i}
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: 10,
                alignItems: "center",
              }}
            >
              <span>
                姓名：{v.name}-身份证：{SFCtoMD(v.code)}
              </span>

              <div></div>
            </div>
          );
        })}
      </div>


      {showAddDialog && (
        <AddDialog close={() => setShowAddDialog(false)}></AddDialog>
      )}
    </div>
  );
};

export default PersonManage;
